<!-- 选择收货地址 -->
<template>
    <div class="address-container">
        <div class="no-order-list" v-show="!orderList.length">暂无订单记录</div>
        <cube-scroll ref="scroll" :data="orderList" :options="options" @pulling-up="onPullingUp" class="order-list-wrapper">
            <div class="order-item" v-for="(item, index) in orderList" :key="index">
                <div class="order-title">
                    <h3>订单号：<span>{{item.order_no}}</span></h3>
                    <p>{{item.date}}</p>
                </div>
                <div class="order-content">
                    <div style="display: flex;"><img :src="pics[item.gid]" /><span style="display: inline-block;line-height: 1.31">{{item.title}}</span></div>
                    <p><strong>{{item.money}}</strong><span style="white-space: nowrap">购买数量：{{item.num}}<!--{{item.unit}}-->张</span></p>
                </div>
                <div class="order-notice">
                    <!--<span :class="{'selected': item.current == 0}" @click="showNotice(index, orderList)">备注</span>
                    <span :class="{'selected': item.current == 1}" @click="showDeliveryDetail(index, orderList)">查看收货详情</span>
                    <span :class="{'selected': item.current == 2}" @click="checkLogistic(index, orderList)">查看物流详情</span>-->
                    <span v-for="(item1, index1) in actionList" :key="index1" :class="{'selected': item.current == index1}" @click="showAction(index, index1, orderList, item.oid)">{{item1}}</span>
                </div>
                <div class="action-info" v-if="orderId == item.oid">
                    <div class="notice" v-if="current == 0">
                        <p>备注信息：{{noticeInfo}}</p>
                    </div>
                    <div class="consignee" v-if="current == 1">
                        <h3><span>收货人：{{consignee.name}}</span><span>联系电话：{{consignee.phone}}</span></h3>
                        <p>收货地址：{{consignee.address}}</p>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script>
  import {/*userInfo, goodsPrice, */orderList} from 'api/register'
  export default {
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        let query = to.query;
      // console.log(query);
      Object.assign(vm, query);
      vm.options.pullUpLoad = {
        threshold: 0,
        txt: {
          more: '上拉加载更多',
          noMore: '没有更多数据了'
        }
      };
      vm.page = 1;
      vm.sw = true;
      vm.orderId = -1;
      vm.getOrderList();
    })
    },
    data () {
      return {
          pics: {
              1: require('assets/images/router.png'),
              2: require('assets/images/reward/1qi.jpg'),
              3: require('assets/images/reward/2qi.jpg'),
              4: require('assets/images/reward/3qi.jpg'),
              5: require('assets/images/reward/4qi.jpg'),
              6: require('assets/images/reward/5qi.jpg'),
          },
        /*uid: this.$store.state.uid,
         token: this.$store.state.token,*/
        uid: localStorage.getItem('wallet_uid') || window['uid'],
        token: '',
        current: -1,
        orderId: -1,
        orderList: [
          /*{orderId: 0, current: -1, orderNo: '4536658', createTime: '2019/03/05 13:23:45', picUrl: require('assets/images/router.png'), name: '人人影视路由器', total: '34523.23CVNT', number: '1', unit: '台'},
          {orderId: 1, current: -1, orderNo: '4536659', createTime: '2019/03/03 18:28:58', picUrl: require('assets/images/router.png'), name: '人人影视路由器', total: '34523.23CVNT', number: '1', unit: '台'}
        */],
        actionList: ['备注', '查看收货详情', '查看物流详情'],
        noticeInfo: '',
        consignee: {
          name: '',
          phone: '',
          address: ''
        },
        page: 1,
        sw: true,
        options: {
          click: true,
          tap: true,
          pullUpLoad: {
            threshold: 0,
            txt: {
              more: '上拉加载更多',
              noMore: '没有更多数据了'
            }
          }
        }
      }
    },
    mounted(){
      // console.log(this.uid);
    },
    computed: {

    },
    methods: {
      getOrderList() {
        orderList(this.uid, this.page).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            if (data.data && data.data.length > 0) {
              for (let i = 0; i < data.data.length; i++) {
                data.data[i].current = -1;
              }
            }
            this.orderList = data.data;
            // console.log(this.orderList);
          }
        })
      },
      goDetailPage() {
        this.$router.push({path: '/', query: {}});
      },
      showAction(index, num, arr, id) {
        for (let i = 0; i < arr.length; i++) {
          if (i == index) {
            this.$set(arr[index], 'current', num);
          }
          if (i != index) {
            this.$set(arr[i], 'current', -1);
          }
        }

        if (num == 0 || num == 1) {
          this.orderId = id;
          this.current = num;
          if (num == 1) {
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].oid == id) {
                this.consignee = {
                  name: arr[i].address_name,
                  phone: arr[i].address_phone,
                  address: arr[i].address
                };
              }
            }
          }
        } else {
          this.orderId = -1;
          this.current = -1;
        }
      },
      showNotice(index, arr) {
        // index = 0;
        this.$set(arr[index], 'current', 0);
      },
      showDeliveryDetail(index, arr) {
        // index = 1;
        this.$set(arr[index], 'current', 1);
      },
      checkLogistic(index, arr) {
        // index = 2;
        this.$set(arr[index], 'current', 2);
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          orderList(this.uid, this.page).then((data) => {
            // console.log(data);
            if (data.status && data.status == 1) {
              if (data.data && data.data.length > 0) {
                for (let i = 0; i < data.data.length; i++) {
                  data.data[i].current = -1;
                }
              }
              this.orderList = this.orderList.concat(data.data);
              this.sw = true;
              // console.log(this.orderList);
            }
            if (data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'common/scss/index.scss';
  body,html{
    height:100%;
  }
  .address-container{
    /*height:calc(100% - 88px);*/
    height:100%;
    background:#F5F5FB;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .no-order-list{
    margin:30px 0;
    font-size:30px;
    text-align:center;
  }
  .order-list-wrapper{
    padding:30px;
    .order-item{
      margin-bottom:24px;
      padding:5px 23px 16px;
      border-radius:10px;
      box-shadow:0 2px 4px 0 rgba(10,29,87,0.3);
      background:#fff;
      .order-title{
        display:flex;
        justify-content:space-between;
        padding:18px 0;
        border-bottom:1px solid #E3E3E3;
        font-size:24px;
        h3{
          color:#666;
          span{
            color:#173E8F;
          }
        }
        p{
          color:#666;
        }
      }
      .order-content{
        display:flex;
        justify-content:space-between;
        margin-top:25px;
        border-bottom:1px solid #E3E3E3;
        div{
          font-size:30px;
          font-weight:500;
          color:#333;
          img{
            //width:102px;
            min-height: 80px;
            height: 80px;
            width: auto;
            margin-right:17px;
            margin-bottom:25px;
            vertical-align:top;
          }
        }
        p{
          text-align:right;
          strong{
            display:block;
            color:#C22F2F;
            font-size:26px;
            margin:4px 0 28px;
          }
          span{
            font-size:26px;
            color:#666;
          }
        }
      }
      .order-notice{
        display:flex;
        justify-content:space-between;
        margin-top:16px;
        span{
          flex:1;
          width:29%;
          margin-right:6.4999%;
          padding:14px 0 13px;
          border-radius:4px;
          font-size:24px;
          border:1px solid #C7C7C7;
          white-space:nowrap;
          text-align:center;
          color:#333;
        }
        span:last-child{
          margin-right:0;
        }
        .selected{
          border:1px solid #173E8F;
          color:#173E8F;
        }
      }
      .action-info{
        margin-top:16px;
        .notice{
          padding:24px 0 23px;
          border-top:1px dashed #E3E3E3;
          font-size:26px;
          color:#999;
        }
        .consignee{
          padding-top:24px;
          border-top:1px dashed #E3E3E3;
          font-size:26px;
          color:#999;
          h3{
            display:flex;
            justify-content:space-between;
            margin-bottom:23px;
          }
          p{
            line-height:1.75;
          }
        }
      }
    }
    .order-item:first-child{
      margin-top:30px;
    }
  }







</style>
